/* @Media Pembelajaran Transmisi Otomatis Berbasis Facebook*/


article, aside, figure, footer, header, hgroup, nav, section {
display:block;
}


/*  font face */

@font-face {
    font-family: 'LeagueGothic';
    src: url('../fonts/League_Gothic-webfont.eot');
    src: url('../fonts/League_Gothic-webfont.eot?#iefix') format('eot'),
         url('../fonts/League_Gothic-webfont.woff') format('woff'),
         url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
         url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
	font-family: 'DroidSans';
	src: url('../fonts/DroidSans.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'DroidSansMono';
	src: url('../fonts/DroidSansMono.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* start here */



html {
	-webkit-text-size-adjust: none;
}


/* body */


body {
  width: 100%;
  margin: 6px auto 0 auto;
  border-top: solid 1px #8e8e8e;
  background: #f1f5f4;
  height: 100%;
  color: #333333;
  font-size: 15px;
  position: relative;
  font-family: "DroidSans",Courier;
}



header{font-family:LeagueGothic;color :#777;font-size:40px;padding-bottom :10px;margin-right:15px;margin-left:15px;}
img{background-color :#999999;border :0px solid #d8dfea;padding :10px;box-shadow:1px 0 1px #CCCCCC,-1px 0 1px #CCCCCC,0 35px 20px -36px #AAAAAA;}
footer{float :left;width :100%;background-color :#eee;height :50px;color :#aaa;padding-top :10px;}
.style5{font-size:19px;font-family:DroidSansMono;color :#3B5998; font-weight:bold}

#left-sidebar{float:left;width:500px;border-right:1px solid #f1f5f4;margin-right:15px;margin-left:15px;padding-top:15px;}
#left-sidebar2{float:left;width:610px;border-right:1px solid #b3b3b3;margin-right:15px;padding-top:15px;}
#right-sidebar{float:left;width:500px;padding-top:25px;margin-right:15px;margin-left:15px;}
#right-sidebar2{float:left;width:500px;padding-top:25px;margin-right:10px;border-right:1px solid #f1f5f4;margin-left:15px;}

/* Main menu */


#main_menu {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0, rgba(0,0,0,0.85)),
	    color-stop(0.40, rgba(0,0,0,1)),
	    color-stop(0.80, rgba(0,0,0,1)),
	    color-stop(1, rgba(0,0,0,0.85))
	);
	z-index: 1000;
	display: none;
}
#main_menu.bottom {
	bottom: 0;
}
#main_menu ul {
	text-align: center;
	width: 220px;
	margin: 160px auto 0;
}
.landscape #main_menu ul {
	margin-top: 100px;
	width: 340px;
}
#main_menu ul li {
	text-align: center;
	display: inline-block;
	margin: 0 5px 20px;
	width: 55px;
	border: 0;
	overflow: visible;
	padding: 0;
}
#main_menu li a {
	display: inline-block;
	color: #999;
	font-family: 'Museo',arial,sans-serif;
	font-size: 0.75em;
	text-decoration: none;
}
#hide_main_menu {
	top: 30px;
	right: 30px;
	margin: 0;
	padding: 0;
	display: block;
	position: absolute;
}
li#hide_main_menu a {
	display: block;
	position: absolute;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	padding: 12px 20px;
	background-color: #eee;
	background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0, rgba(0,0,0,0.1)),
	    color-stop(0.5, rgba(0,0,0,0)),
	    color-stop(0.5, rgba(255,255,255,1)),
	    color-stop(1, rgba(255,255,255,0))
	);
	text-shadow: 0 1px 0 #fff;
	color: #333;
	border: 0;
	-webkit-box-shadow: none;
}

.landscape li#hide_main_menu {
	top: 12px;
	right: 25x;
}



/* network status */

#status{padding:5px;color:#fff;background:#ccc;}

#status.fail{background:#c00;}

#status.success{background:#0c0;}

#status.offline{background:#c00;}

#status.online{background:#0c0;}

/*footer #built:hover:after{content:'...quickly';}
*/
[contenteditable]:hover:not(:focus){outline:1px dotted #ccc;}




/* UI light box */

.uiBoxLightblue{background-color :#edeff4;border :1px solid #d8dfea;}
.uiBoxLightyellow{background-color :#f5f8c2;border :1px solid #edeed8;}
.uiBoxLightred{background-color :#fad9d9;border :1px solid #f9bfbf;}


/* link */

a:link{text-decoration:none;color:#0000CC;}
a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
a:active{text-decoration:none;}



/*background-color :#edeff4;border :0px solid #d8dfea;padding :10px;box-shadow:2px 0 5px #CCCCCC,-2px 0 5px #CCCCCC,0 30px 28px -30px #AAAAAA; */
/* footer */

.footer{font-family:LeagueGothic;color :#777;font-size:46px;padding-bottom :30px;}
.footercontent{margin :0 auto;max-width :880px;padding :10px;}
.footercopyright{float :right;margin-right:15px;}
.footer .links{text-align :right;}
.footer .links a{margin-left :15px;text-decoration :none;}



/* button */


.button {
	border: 0;
	float: right;
	font-size: 0.95em;
	font-family: 'Museo', arial, sans-serif;
	cursor: pointer;
	background-color: #eee;
	background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0, rgba(0,0,0,0.1)),
	    color-stop(0.5, rgba(0,0,0,0)),
	    color-stop(0.5, rgba(255,255,255,1)),
	    color-stop(1, rgba(255,255,255,0))
	);
	padding: 10px;
	border: 1px solid #999;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px 1px #fff, inset 0 1px 1px #fff, inset 0 -1px 1px #ccc;
	-moz-box-shadow: 0 1px 1px #fff, inset 0 1px 1px #fff, inset 0 -1px 1px #ccc;
	box-shadow: 0 1px 1px #fff, inset 0 1px 1px #fff, inset 0 -1px 1px #ccc;
	text-shadow: 0 1px 1px #fff;
	color: #333;
	text-decoration: none;
}
.button.disabled {
	opacity: 0.4;
	cursor: default;
}



/* ui button and widget*/

.uiButton,.uiButtonSuppressed:active,.uiButtonSuppressed:focus,.uiButtonSuppressed:hover{background-image:url(https://s-static.ak.facebook.com/rsrc.php/v1/yn/r/zHNGLEeoCs0.png);background-repeat:no-repeat;background-position:0 -343px;background-color:#eee;border:1px solid #999;border-bottom-color:#888;box-shadow:0 1px 0 rgba(0, 0, 0, .1);cursor:pointer;display:-moz-inline-box;display:inline-block;font-size: 11px;font-weight:bold;line-height:normal !important;padding:2px 6px;text-align:center;text-decoration:none;vertical-align:top;white-space:nowrap}
.uiButton + .uiButton{margin-left:4px}
.uiButton:hover{text-decoration:none}
.uiButton:active,.uiButtonDepressed{background:#ddd;border-bottom-color:#999;box-shadow:0 1px 0 rgba(0, 0, 0, .05)}
.uiButton .img{margin-top:2px;vertical-align:top}
.uiButtonLarge .img{margin-top:4px}
.uiButton .customimg{margin-top:0}
.uiButton .uiButtonText,.uiButton input{background:none;border:0;color:#333;cursor:pointer;display:-moz-inline-box;display:inline-block;font-family:'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;font-size: 11px;font-weight:bold;margin:0;outline:none;padding:1px 0 2px;white-space:nowrap}

#window_overlay{width :100%;height :100%;position :fixed;left :0;top :0;}
.my_container{color :orange;}
.my_header{font-family :Verdana,Arial,sans-serif;font-size :10px;font-weight :bold;letter-spacing :1px;}
.my_frame{letter-spacing :3px;font-size :14px;}
.my_footer{letter-spacing :2px;background :#eee;color :#333;}
.my_selected_header{background :#222222;color :#ddd;}


.ui-widget{font-family :Verdana,Arial,sans-serif;font-size :1.1em;}
.ui-widget .ui-widget{font-size :1em;}
.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family :Verdana,Arial,sans-serif;font-size :1em;}
.ui-widget-content{border :1px solid #aaaaaa;background :#ffffff;color :#222222;}
.ui-widget-content a{color :#222222;}
.ui-widget-header{border :1px solid #aaaaaa;background :#cccccc;color :#222222;font-weight :bold;}
.ui-widget-header a{color :#222222;}

.ui-widget :active{outline :none;}


/* text area  **/

#ta {

    width: 400px;
    height: 150px;
    display: block;
}

#localstorage-message {
    padding-top: 20px;

}



          #columns-no-example {



            -webkit-column-count: 2;



            -webkit-column-rule: 1px solid #bbb;



            -webkit-column-gap: 2em;



            -moz-column-count: 2;



            -moz-column-rule: 1px solid #bbb;



            -moz-column-gap: 2em;



            column-count: 2;



            column-rule: 1px solid #bbb;



            column-gap: 2em;

			margin-right:15px;margin-left:15px;padding-top:15px;

          }



          #columns-no-example p {



            font-size: 15px;



          }
